<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

<script>
    $(function () {
        var data = [
            { rank: 1, company: 'Exxon Mobil', revenues: 339938.0, profits: 36130.0 },
            { rank: 2, company: 'Wal-Mart Stores', revenues: 315654.0, profits: 11231.0 },
            { rank: 3, company: 'Royal Dutch Shell', revenues: 306731.0, profits: 25311.0 },
            { rank: 4, company: 'BP', revenues: 267600.0, profits: 22341.0 },
            { rank: 5, company: 'General Motors', revenues: 192604.0, profits: -10567.0 },
            { rank: 6, company: 'Chevron', revenues: 189481.0, profits: 14099.0 },
            { rank: 7, company: 'DaimlerChrysler', revenues: 186106.3, profits: 3536.3 },
            { rank: 8, company: 'Toyota Motor', revenues: 185805.0, profits: 12119.6 },
            { rank: 9, company: 'Ford Motor', revenues: 177210.0, profits: 2024.0 },
            { rank: 10, company: 'ConocoPhillips', revenues: 166683.0, profits: 13529.0 },
            { rank: 11, company: 'General Electric', revenues: 157153.0, profits: 16353.0 },
            { rank: 12, company: 'Total', revenues: 152360.7, profits: 15250.0 },
            { rank: 13, company: 'ING Group', revenues: 138235.3, profits: 8958.9 },
            { rank: 14, company: 'Citigroup', revenues: 131045.0, profits: 24589.0 },
            { rank: 15, company: 'AXA', revenues: 129839.2, profits: 5186.5 },
            { rank: 16, company: 'Allianz', revenues: 121406.0, profits: 5442.4 },
            { rank: 17, company: 'Volkswagen', revenues: 118376.6, profits: 1391.7 },
            { rank: 18, company: 'Fortis', revenues: 112351.4, profits: 4896.3 },
            { rank: 19, company: 'Crédit Agricole', revenues: 110764.6, profits: 7434.3 },
            { rank: 20, company: 'American Intl. Group', revenues: 108905.0, profits: 10477.0 }
        ];
        var frozenRows = [];

        var obj = {
            scrollModel: { autoFit: true },
            showTitle: false,
            resizable: true,
            freezeRows: 2,
            //showHeader: false,
            height: 400,
            beforeSort: function (evt, ui) {
                if ($("#sort_all_chk").prop("checked")) {
                    var $grid = $(this),
                        freezeRows = $grid.pqGrid("option", "freezeRows"),
                        dataGrid = $grid.pqGrid("option", "dataModel.data");                    

                    frozenRows = dataGrid.splice(0, freezeRows);
                }
            },
            sort: function (evt, ui) {
                if ($("#sort_all_chk").prop("checked")) {
                    var $grid = $(this),
                        DM = $grid.pqGrid("option", "dataModel");                    

                    DM.data = frozenRows.concat(DM.data);
                }
            },
            colModel: [
                { title: "Rank", width: 100, dataType: "integer", dataIndx: "rank" },
                { title: "Company", width: 200, dataType: "string", dataIndx: "company" },
                { title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right", dataIndx: "revenues" },
                { title: "Profits ($ millions)", width: 150, dataType: "float", align: "right", dataIndx: "profits" }
            ],
            dataModel: { data: data },
            create: function () {
                var $grid = $(this);
                $grid.find(".frozen").val($grid.pqGrid('option', 'freezeRows'));
            },
            toolbar: {
                items: [
                    { type: '<span>Select number of frozen rows: </span>' },
                    { type: 'select', cls: 'frozen', options: [0, 1, 2, 3, 4, 5, 6, 7, 8], listeners: [
                        {
                            change: function (evt) {
                                $("#grid_freeze_rows").pqGrid("option", "freezeRows", $(this).val());
                                $("#grid_freeze_rows").pqGrid("refresh");
                            }
                        }
                    ]
                    },
                    { type: 'separator' },
                    { type: '<input type="checkbox" id="sort_all_chk" checked="checked"/>' },
                    { type: '<label for="sort_all_chk">Exclude frozen rows while sorting</label>' }
                ]
            }
        };
        $("#grid_freeze_rows").pqGrid(obj);

    });
        
</script>    
</head>
<body>
Similar to Microsoft Excel, rows can be frozen in ParamQuery Grid by setting the option freezeRows to a desired number. 
The frozen rows can be excluded while sorting with help of events.
<div id="grid_freeze_rows" style="margin:auto;"></div>

</body>

</html>
